<!DOCTYPE html>
<html ng-app="myappz">
<head lang="en">
    <meta charset="UTF-8">
    <meta name='viewport' content="width=device-width,initial-scale=1"/>
    <title>Angular</title>
    <link rel="stylesheet" href="/components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/css/medias.css">
    <link rel="stylesheet" href="/components/dist/css/swiper.min.css">
    <!--<link rel="stylesheet" href="/components/font-awesome/css/font-awesome.css">-->
    <link rel="stylesheet" href="/css/swiper.css">
    <link rel="stylesheet" href="/css/product.css">
    <script src="/components/jquery/dist/jquery.js"></script>
    <script src="/components/angular/angular.js"></script>
    <script src="/components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="/components/dist/js/swiper.min.js"></script>
</head>
<body ng-controller="myctrlz">
<div class="zh">
    <div id="main-wrapper" class="with-footer">
        <div id="header" class="clearfix">
            <div class="left">
                <a href="javascript:history.back(-1)" class="go-back">返回</a>
            </div>
            <div class="center">
                <h1 id="page-title">商品详情</h1>
            </div>
            <div class="right" ng-click="zhhdisplay()">
                <a href="#" class="links-toggle-button icon-menu">links</a>
                <div class="dropdown-menu-wrapper" id="zhhdisplay">
                    <div class="up-arrow"></div>
                    <ul class="dropdown-menus">
                        <li class="homes"><a href="/">首页</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--内容开始-->
        <div id="main-content" class="products-detail-more">
            <div class="product-detail margin-top" id="content">
                <p>
                    <img ng-src={{LIST[id2].detailimgSrc[0][0]}} />
                    <!--<img ng-src="http://img20.360buyimg.com/vc/jfs/t556/297/751383365/64664/1d665e05/54852aecN6f6aa620.jpg"/>-->
                </p>
                <p>
                    <img ng-src={{LIST[id2].detailimgSrc[1][0]}} />
                </p>
                <p>
                    <img ng-src={{LIST[id2].detailimgSrc[2][0]}} />
                </p>
                <p>
                    <img ng-src={{LIST[id2].detailimgSrc[3][0]}} />
                </p>
                <p>
                    <img ng-src={{LIST[id2].detailimgSrc[4][0]}} />
                </p>
                <p>
                    <img ng-src={{LIST[id2].detailimgSrc[5][0]}} />
                </p>
                <p>
                    <img ng-src={{LIST[id2].detailimgSrc[6][0]}} />
                </p>
                <p>
                    <img ng-src={{LIST[id2].detailimgSrc[7][0]}} />
                </p>
                <p>
                    <img ng-src={{LIST[id2].detailimgSrc[8][0]}} />
                </p>
                <p>
                    <img ng-src={{LIST[id2].detailimgSrc[9][0]}} />
                </p>
                <p>
                    <br/></p>
            </div>
        </div>

        <!--内容结束-->
    <div class="product-attr-select-form-bg" id="addgo" >
        <div id="product-attr-select-form-wrapper">
            <div class="product-base-info clearfix">
                <div id="close-form-button" ng-click="addgo2()"></div>
                <div class="prod-img">
                    <img src="http://img.mcshop.com.cn/c/640x640/uploads/2015-07-01/Su5l31435755169.jpg" width="640" height="640" alt="悠漫（Lancasten）进口奶源奶焙糖 原味香纯奶焙糖袋装500g">
                </div>
                <div class="prod-price">
                    <span id="sale-price">￥39.00</span>
                    <span class="prod-stock">(库存：<i id="total-stock">300</i>)</span>
                </div>
                <div class="prod-selected-attr">
                    <span>请选择：重量</span>
                </div>
            </div>
            <div id="product-attributes">
                <form method="post" action="http://10246.mcshop.com.cn/shopping/checkout" accept-charset="UTF-8" id="product-attributes-form"><input name="_token" type="hidden" value="0kk5h53nWa9Z48k3fUw6aTgX3YPrS8ypedcSNgmu">
                    <div class="attribute">
                        <div class="attr-name">
                            重量
                        </div>
                        <div class="attr-list clearfix" >
                            <ul>
                                <li class="option" id="addd" ng-click="ccc()">
                                    <span>500g</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div id="product-buy-count" class="clearfix">
                        <label>数量</label>
                        <div class="buy-count-form">
                            <input id="buy-count" type="text" value={{Count}} ng-init="Count=1" name="num"/>
                            <span class="sub" ng-click="sub()">-</span>
                            <span class="plus" ng-click="plus()">+</span>
                        </div>
                    </div>
                    <input id="entityId" name="entityId" type="hidden" value="0">
                    <input name="productId" type="hidden" value="15173">
                    <input name="activity" type="hidden" value="0">
                    <input name="distributor_product_id" type="hidden" value="0">
                </form>
            </div>
        </div>
    </div>


    <div id="footer">
        <table class="add-to-cart" style="height:100%">
            <tbody>
            <tr>
                <td class="shopping-cart-wrapper">
                    <a href="http://10246.mcshop.com.cn/shopping/cart" class="shopping-cart-base">
                        <span class="cart-prod-num"><span>0</span></span>
                    </a>
                </td>
                <td><span class="add-to-cart-button" ng-click="addgo()"><span>加入购物车</span></span></td>
                <td><span class="buy-button" ng-click="addgo()"><span>立即购买</span></span></td>
                <td class="confirm"><span class="submit-button"><span>确定</span></span></td>
            </tr>
            </tbody>
        </table>
    </div>
    </div>
    </div>

<script>
    var app = angular.module('myappz', ['ui.router']);
    app.factory('Xiangqing',['$http',function($http){
        return{
            search:function(type){
                return $http.get('/api/candy/get'+type+'list')
            }
        }
    }])
    app.controller('myctrlz', ['$scope','$location','Xiangqing',function ($scope,$location,Xiangqing) {

        $scope.xiabiao = $location.absUrl().indexOf('?')+1;
        $scope.str = $location.absUrl().substring($scope.xiabiao);
        $scope.id = $scope.str.split('&')[0].split('=')[1];
        $scope.id2 = $scope.id-1;
        $scope.type = $scope.str.split('&')[1].split('=')[1];
        Xiangqing.search($scope.type)
                .then(function(res){
                    $scope.LIST=res.data;
//                    console.log($scope.LIST[0].detailimgSrc[0][0]);

                },function(){

                })

        var count = 1;
        $scope.ccc=function(){
            if(count%2==1){
                $('#addd').addClass('selected');
            }else{
                $('#addd').removeClass('selected');
            }
            count++;
        }
        var addgo=1;
        $scope.addgo= function () {
            if(addgo%2==1){
                $('#addgo').addClass('showing')
                $('#footer').addClass('selecting')
                $('#zhhdisplay').addClass('zhhdisplay')
            }else {
                $('#footer').removeClass('selecting')
            }
            addgo++;
        }
        var addgo2=1;
        $scope.addgo2= function () {
            if(addgo2%2==1){
                $('#addgo').removeClass('showing')
                $('#footer').removeClass('selecting')
                $('#zhhdisplay').removeClass('zhhdisplay')

            }
        }
        var zhhdisplay=1;
        $scope.zhhdisplay=function(){
            if(zhhdisplay%2==1){
                $('#zhhdisplay').addClass('zhhdisplay')
            }else {
                $('#zhhdisplay').removeClass('zhhdisplay')
            }
            zhhdisplay++;
        }
        $scope.sub= function () {

            if($scope.Count==1){
                return
            }
            $scope.Count--;
        }
        $scope.plus = function () {
            $scope.Count++;
        }
    }]);
</script>
</body>
</html>